<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="format-detection" content="telephone=no"/>
<meta name="wap-font-scale" content="no">
<meta name="renderer" content="webkit">
<title>AutoCode</title>
<link rel="shortcut icon" href="/favicon.ico" />
<script src="/links/jquery/jquery-3.5.1.min.js"></script>
<script src="/links/polyfill.min.js"></script>
<script src="/links/axios/axios.min.js"></script>
<script src="/links/vue/vue.min.js"></script>
<script src="/links/element-ui/index.js"></script>
<script src="/links/dayjs.min.js"></script>
<script src="/links/echarts/echarts.js"></script>
<script src="/links/JsBarcode.all.js"></script>
<script src="/links/qrcode.min.js"></script>
<script src="/links/layer/layer.js"></script>
<script src="/links/crypto/crypto-js.js"></script>
<script src="/js/dragController.js"></script>
<script src="/js/HttpApi.js"></script>
<script src="/js/AutoCode.js"></script>
<link href="/links/element-ui/theme/index.css" rel="stylesheet"/>
<link href="/css/default.css" rel="stylesheet"/>
<link href="/css/dragController.css" rel="stylesheet"/>
    
    <style>
        
    </style>
</head>
<body>
<div id="app"  class="box " >
<div class="left " style="width:450px;">
<div class="flex ac-tree-head ac-tree-head-default-line">
    <div class="ac-tree-title">{{funcTree.title}}</div>
    <div class="ac-tree-oper">
        <el-form :inline="true" label-position="left" :model="funcTree.operData" size="mini" class="searchForm" @submit.native.prevent="funcTree_load">
<el-form-item v-if="funcTree.operVisible.fabu"><el-button size="medium"  v-if="funcTree.operVisible.fabu" @click="funcTree_syncFuncAndRelease()" :disabled="funcTree.operDisabled.fabu"  type="text"     native-type="button">一键发布</el-button>
</el-form-item>
<el-form-item v-if="funcTree.operVisible.type"><el-upload
  action="/platform/funcTree/upLoadRealsePage"
  :show-file-list="false"
  :data={}
   accept=".lg"
  :disabled="funcTree.operDisabled.type"
  :http-request="funcTree_httpRequest">
  <el-button slot="trigger" size="medium" type="text" :disabled="funcTree.operDisabled.type" >导入页面</el-button>
</el-upload>
</el-form-item>
<el-form-item v-if="funcTree.operVisible.buttonC"><el-button size="medium"  v-if="funcTree.operVisible.buttonC" @click="funcTree_editSelectPages()" :disabled="funcTree.operDisabled.buttonC"  type="text"     native-type="button">下载页面</el-button>
</el-form-item>
<el-form-item v-if="funcTree.operVisible.buttonQ"><el-button size="medium"  v-if="funcTree.operVisible.buttonQ" @click="funcTree_load()" :disabled="funcTree.operDisabled.buttonQ"  type="text"     native-type="button">刷新</el-button>
</el-form-item>
<el-form-item v-if="funcTree.operVisible.buttonA"><el-button size="medium"  v-if="funcTree.operVisible.buttonA" @click="funcTree_syncFunc()" :disabled="funcTree.operDisabled.buttonA"  type="text"     native-type="button">功能更新</el-button>
</el-form-item>

</el-form>

    </div>
</div>
<div class="ac-tree-content">
    <el-tree ref="funcTree" :data="funcTree.data"
    :expand-on-click-node="false" node-key="id" empty-text="内容为空"
    highlight-current :current-node-key="funcTree.currentNodeKey"  
       
    
      
       
    
    @current-change="funcTree_currentChange"
    >
    <span class="custom-tree-node" slot-scope="{node, data}">
    <span>
        <i class="el-icon-document" v-if="data.type=='page'" style="color:rgb(250,170,57);"></i>
        <i class="el-icon-folder" style="color:rgb(250,170,57);" v-else></i>
        <template v-if="data.type=='category'"> {{data.label}}</template>
        <template v-else-if="data.type=='application'"> {{data.code}}</template>
        <template v-else> {{data.code}}【{{data.label}}】</template>
    </span>
    <span>
        <el-dropdown size="small" @command="funcTree_treeCommand">
            <el-link icon="el-icon-more"></el-link>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{'flag':'del','nodeData':data}">删除</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </span>
</span>
</el-tree>

</div>
</div>
<div class="resize"></div>
<div class="right " style="width:calc(100% - 452px);">
<div class="box"><div class="topBox " style="height:160px;">
<div class="flex ac-form-head ac-form-oper-head-line">
    <div class="ac-form-title">{{funcInfo.title}}</div>
    <div class="ac-form-oper"><el-button size="medium"  v-if="funcInfo.operVisible.buttonQ" @click="funcInfo_getReleaseVersion()" :disabled="funcInfo.operDisabled.buttonQ"  type="text"     native-type="button">版本更新</el-button>
<el-button size="medium"  v-if="funcInfo.operVisible.buttonC" @click="funcInfo_pageRelease()" :disabled="funcInfo.operDisabled.buttonC"  type="text"     native-type="button">发布最新页面</el-button>
</div>
</div>
<div class="ac-form-content">
            <el-form class="ac-form-detail"    label-width="80px" label-position="right"
     size="mini" ref="funcInfo" :model="funcInfo.data" :rules="funcInfo.rules"  
     :disabled="funcInfo.disabled" @submit.native.prevent>
    <el-row><el-col :span=12 v-if="funcInfo.itemVisible.categoryCode">
    <el-form-item prop="categoryCode" label="目录">
        {{funcInfo.data.categoryCode}}

    </el-form-item>
</el-col>
<el-col :span=12 v-if="funcInfo.itemVisible.code">
    <el-form-item prop="code" label="页面代码">
        {{funcInfo.data.code}}

    </el-form-item>
</el-col>
<el-col :span=12 v-if="funcInfo.itemVisible.label">
    <el-form-item prop="label" label="页面名称">
        {{funcInfo.data.label}}

    </el-form-item>
</el-col>
<el-col :span=12 v-if="funcInfo.itemVisible.version">
    <el-form-item prop="version" label="当前版本">
        {{funcInfo.data.version}}

    </el-form-item>
</el-col>
</el-row>
 </el-form>

</div>
</div>
<div class="move"></div>
<div class="downBox " style="height:calc(100% - 162px);">
<el-table row-key="id" highlight-current-row stripe show-header    border  
    :data="funcVersions.data" size="mini" ref="funcVersions"
       
    height="100%"
    @current-change="funcVersions_currentChange">
    <el-table-column type="index" width="50" label="序号"></el-table-column>
<el-table-column prop="version" label="版本号"    align="left"   >
   <template slot-scope="scope">
        {{scope.row.version}}
   </template>
</el-table-column>
<el-table-column prop="releaseTime" label="发布时间"    align="left"   >
   <template slot-scope="scope">
         <template v-if="scope.row.releaseTime">
 <i class="el-icon-time"></i> {{dayjs(scope.row.releaseTime).format("YYYY-MM-DD HH:mm:ss")}}
</template>

   </template>
</el-table-column>
<el-table-column prop="releaseUser" label="发布人"    align="left"   >
   <template slot-scope="scope">
        {{scope.row.releaseUser}}
   </template>
</el-table-column>
<el-table-column prop="updateTime" label="更新时间"    align="left"   >
   <template slot-scope="scope">
         <template v-if="scope.row.updateTime">
 <i class="el-icon-time"></i> {{dayjs(scope.row.updateTime).format("YYYY-MM-DD HH:mm:ss")}}
</template>

   </template>
</el-table-column>
<el-table-column prop="updateUser" label="更新人"    align="left"   >
   <template slot-scope="scope">
        {{scope.row.updateUser}}
   </template>
</el-table-column>

</el-table>

</div>
</div>
</div>

<el-dialog :visible.sync="selectPages.visible" :title="selectPages.title"
            width="50%"
                
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            <div style="width:100%;height:400px;">
                <div style="height:100%;overflow-y: auto;">
    <el-tree ref="selectPages" :data="selectPages.data"
    :expand-on-click-node="false" node-key="id" empty-text="内容为空"
    highlight-current :current-node-key="selectPages.currentNodeKey"  
    show-checkbox  :default-checked-keys="selectPages.defaultCheckedKeys" 
    
      
       
    @check="selectPages_check"
    @current-change="selectPages_currentChange"
    >
    <span class="custom-tree-node" slot-scope="{ node, data }">
    <span>
         <i class="el-icon-document" v-if="data.type=='page'" style="color:rgb(250,170,57);"></i>
        <i class="el-icon-folder" style="color:rgb(250,170,57);" v-else></i>
        <template v-if="data.type=='category'"> {{data.label}}</template>
        <template v-else-if="data.type=='application'"> {{data.code}}</template>
        <template v-else> {{data.code}}【{{data.label}}】</template>
    </span>
</span>
</el-tree>

</div>
            </div>
            <div class="dialog-footer" slot="footer">    <el-button size="mini" @click="selectPages_dialogOk()"  type="primary"      native-type="button">确 定</el-button>
    <el-button size="medium" @click="selectPages_dialogCancel()"  type="text"      native-type="button">取 消</el-button>
</div>
</el-dialog>


</div>

</body>
<script th:inline="javascript">
    let vm = new Vue({
            el: '#app',
            data() {
                return {"funcVersions":{"title":"更新记录","currentRow":{},"data":[],"expandRowKeys":[],"pagingData":{},"operData":{},"operVisible":{},"operDisabled":{},"rawData":[],"itemVisible":{},"operDialogVisible":false},"funcTree":{"title":"功能列表","data":[],"defaultCheckedKeys":[],"currentNodeKey":{},"operData":{"type":""},"operVisible":{"buttonC":true,"buttonQ":true,"buttonA":true,"type":true,"fabu":true},"operDisabled":{},"currentRow":{}},"funcInfo":{"title":"页面信息","data":{},"operData":{},"operVisible":{"buttonQ":true,"buttonC":true},"operDisabled":{},"disabled":false,"editorForm":true,"itemVisible":{"categoryCode":true,"code":true,"label":true,"version":true},"itemDisabled":{},"transfer":{},"rules":{}},"page":{},"tabDisabled":{},"tabVisible":{},"customOptions":{},"dictOptions":{},"selectPages":{"visible":false,"title":"选择下载页面","data":[],"defaultCheckedKeys":[],"currentNodeKey":{},"operData":{},"operVisible":{},"operDisabled":{},"currentRow":{}}}
            },
            watch: {
},
            methods: {
funcTree_allowDrag:function(node){
    
},
funcTree_httpRequest:function(file) {
    let that = this;
    let fileData = file.data;
    HttpApi.upload(file, function(fileAttr) {
        //回填数据
        //that.funcVersions.currentRow.imageId = fileAttr.id;
        that.funcTree_load();
    })
},
selectPages_filterNodeMethod:function(value, data){
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
},
funcVersions_load:function() {
    let that = this;
    HttpApi.post("/platform/funcVersions/load", this.funcVersions.operData, function(res) {
        that.funcVersions.data = res;

        if (that.funcVersions.data.length > 0) {
            that.$refs.funcVersions.setCurrentRow(that.funcVersions.data[0]);
        }

    });
},
funcTree_syncFunc:function(param) {
    let that = this;
    HttpApi.post("/platform/funcTree/syncFunc", {}, function(res) {
        /*请补充方法信息*/
        that.$message.success("更新成功");
        that.funcTree_load();
    });
},
funcTree_currentChange:function(data, node) {
    if (data) {
        this.funcTree.currentNodeKey = data.id;
        this.funcTree.currentRow = data;
        this.funcInfo.editorForm = true;
        this.funcInfo.operData.id = this.funcTree.currentRow.id;
        this.funcInfo_load();
        
        this.funcVersions.operData.pageId = this.funcInfo.operData.id;
        this.funcVersions_load();

    } else {
        this.$data.funcTree.currentNodeKey = this.$options.data().funcTree.currentNodeKey;
        this.$data.funcTree.currentRow = this.$options.data().funcTree.currentRow;
        this.$data.funcInfo.operData = this.$options.data().funcInfo.operData;
        this.$data.funcInfo.data = this.$options.data().funcInfo.data;
        
        this.$data.funcVersions.operData = this.$options.data().funcVersions.operData;
        this.$data.funcVersions.data = this.$options.data().funcVersions.data;
    }
},
selectPages_currentChange:function(){
    //没有定义方法模板，需要手动编辑
}
,
selectPages_dialogCancel:function(){
     this.selectPages.visible = false;
},
funcInfo_httpRequest:function(file){
    let fileData = {};
    fileData.busiId="";
    fileData.busiFlag="";
    file.data=fileData;
    HttpApi.upload(file,function(fileAttr){

    })
}
,
selectPages_nodeDrop:function(draggingNode, dropNode, dropType, ev){
	let that = this;
	/*共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、
	    被拖拽节点的放置位置（before、after、inner）、event	*/
	
},
funcTree_check:function(node,list){
	/*设置单选
	if (list.checkedKeys.length >= 2) {
		this.$ref.funcTree.setCheckedKeys([node.id]);
	}*/
},
selectPages_allowDrop:function(draggingNode, dropNode, type){
    /*拖拽时判定目标节点能否被放置。
    type ：'prev'、'inner' 和 'next'，
    分别表示放置在目标节点前、插入至目标节点和放置在目标节点后*/
},
selectPages_allowDrag:function(node){
    return true;
},
funcTree_download:function(param) {
    let that = this;
    HttpApi.download("/platfrom/funcTree/download", {}, function(res) {
        /*请补充方法信息*/
    });
},
selectPages_dialogOk:function() {
    let checkedNodes = this.$refs.selectPages.getCheckedNodes();
    if (checkedNodes.length === 0) {
        this.$alert("请选择一条信息");
    } else {
        this.selectPages.callback(checkedNodes);
    }
},
funcInfo_load:function() {
    let that = this;
    HttpApi.post("/platform/funcInfo/load", this.funcInfo.operData, function(res) {
        that.funcInfo.data = res;
    });
},
funcVersions_operCtrl:function(currentRow) {
    /**
    * operDisabled：控制按钮的是否禁止操作，true代表禁止操作，false代表允许操作
    * this.$set(this.stdSolReceiveHistory.operDisabled, "buttonE", true);
    * operVisible：控制按钮是否显示，true代表显示，false代表不显示
    * this.$set(this.stdSolReceiveHistory.operVisible, "buttonE", false);
    */
    if(!currentRow) {
       
    }else {
       
    }
},
selectPages_check:function(node,list){
        
},
funcTree_load:function(node, resolve) {
    let that = this;
    if (node) {
        HttpApi.post("/platform/funcTree/load", {
            "parentId": node.id
        }, function(res) {
            return resolve(res);
        });
    } else {
        HttpApi.post("/platform/funcTree/load", this.funcTree.operData, function(treeData) {
            that.funcTree.data = treeData;
            if (treeData.length > 0) {
                that.$nextTick(function() {
                    that.$refs.funcTree.setCurrentKey(treeData[0].id);
                    that.funcTree_currentChange(treeData[0]);
                });
            } else {
                that.funcTree_currentChange();
            }
        });
    }

},
funcInfo_pageRelease:function(param) {
    let that = this;
    HttpApi.post("/platform/funcInfo/pageRelease", {
        "id": this.funcInfo.data.id
    }, function(res) {
        /*请补充方法信息*/
        that.funcInfo_load();
        that.funcVersions_load();
        that.$message.success(res.msg);
    });
},
funcTree_treeCommand:function(param) {
    let that = this;
    if (param.flag == "del") {
        HttpApi.postConfirm("/platform/funcTree/del", param.nodeData, function(res) {
            that.$refs.funcTree.remove(param.nodeData);
            that.funcTree_currentChange();
        });
    }

},
selectPages_dialogOpen:function(param,callback){
    this.$data.selectPages.data = this.$options.data().selectPages.data;
    this.$data.selectPages.operData = this.$options.data().selectPages.operData;
    for(let val in param) {
        this.$set(this.selectPages.operData, val, param[val])
    }
    this.selectPages.callback=callback;
    this.selectPages.visible = true;
    this.selectPages_load();
}
,
selectPages_checkChange:function(){
    //没有定义方法模板，需要手动编辑
}
,
selectPages_treeCommand:function(param){
    let that = this;
    if(param.flag=="addChildren"){
        let dialogParam = {};
        dialogParam.parentId=param.nodeData.id;
        /*添加子节点执行的函数
        that.{dialogCode}_dialogOpen(dialogParam,function(dailogData){
            HttpApi.saveProvider("selectPages",dailogData,function(res){
                if(res.parentId=="-1"){
                    that.selectPages.data.push(res);
                }else{
                    that.$refs.selectPages.append(res,res.parentId);
                }
                that.{dialogCode}.visible = false;
            });
        })
        */
    }
    if(param.flag=="del"){
        HttpApi.delProviderConfirm("",param.nodeData,function(res){
            that.$refs.selectPages.remove(param.nodeData);
            that.selectPages_currentChange();
        });
    }
},
funcTree_editSelectPages:function() {
    /*没有定义方法模板，需要去定义方法模板*/
    let that = this;
    this.selectPages_dialogOpen({}, function(dialogData) {
        HttpApi.download("/platform/funcTree/downLoadRealsePage", dialogData, function(res) {
            that.selectPages.visible = false;
            /*请补充方法信息*/
        });

    })
},
selectPages_nodeClick:function(data,node){
    this.selectPages.currentNodeKey=data.id;
},
funcVersions_currentChange:function(currentRow){
    if(!currentRow){
        //如果没有传入值，则将当前的选中值清空
        this.$data.funcVersions.currentRow = this.$options.data().funcVersions.currentRow;
    }else{
        this.funcVersions.currentRow = currentRow;
    }
},
funcTree_filterNodeMethod:function(value, data){
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
},
funcTree_syncFuncAndRelease:function() {
    let that = this;
    HttpApi.post("/platform/funcTree/syncFuncAndRelease", {}, function(res) {
        //请补充方法执行成功后要做的操作
        that.$message.success("更新成功");
        that.funcTree_load();
    })
},
selectPages_treeCommand1:function(param){
    let that = this;
    if(param.flag=="addChildren"){
        let dialogParam = {};
        dialogParam.parentId=param.nodeData.id;
        /*添加子节点执行的函数
        that.{dialogCode}_dialogOpen(dialogParam,function(dailogData){
           HttpApi.saveProvider("selectPages",dailogData,function(res){
               if(!res.parentId || res.parentId=="-1"){
                   that.selectPages.data.push(res);
               }else{
                   that.$refs.selectPages.append(res,res.parentId);
               }
              that.{dialogCode}.visible = false;
           });
        })
        */
    }
    if(param.flag=="del"){
        HttpApi.delProviderConfirm("",param.nodeData,function(res){
            that.$refs.selectPages.remove(param.nodeData);
            that.selectPages_currentChange();
        });
    }
}
,
selectPages_load:function() {
    let that = this;
    HttpApi.post("/platform/funcTree/selectPages", that.selectPages.operData, function(treeData) {
        that.selectPages.data = treeData;
    });
},
funcInfo_getReleaseVersion:function(param) {
    let that = this;
    HttpApi.post("/platform/funcInfo/getReleaseVersion", {
        "id": this.funcInfo.data.id
    }, function(res) {
        /*请补充方法信息*/
        that.funcInfo_load();
        that.$message.success("更新成功");
    });
},
funcInfo_pageDownload:function(param) {
    let that = this;
    HttpApi.download("/platform/funcInfo/pageDownload", this.funcInfo.operData, function(res) {
        /*请补充方法信息*/
    });
},
funcTree_allowDrop:function(draggingNode, dropNode, type){
    /*拖拽时判定目标节点能否被放置。
    type ：'prev'、'inner' 和 'next'，
    分别表示放置在目标节点前、插入至目标节点和放置在目标节点后*/
}
},
            mounted: function(){
    dragControllerLR();
    dragControllerUD();
},
            created: function(){
    let that=this;
    //获取字典信息
    HttpApi.post("/autocode/dictProvider/options",[],function(res){
        that.dictOptions=res;
    });

    //加载自定义数据字典
    

    //加载初始化load
    this.funcTree_load();

    //加载初始化方法
    
}
    });
    

    
</script>
</html>
